<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台首页</title>
    <!-- 引入Bootstrap样式文件 -->
    <link href="../common/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Chart.js库 -->
    <script src="../common/js/chart.umd.js"></script>

    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }

        .container {
            display: flex;
            justify-content: center;
        }

        .chart-container {
            width: 50%;
            height: 50%;
        } 

        #myPieChart {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <?php
    include './header.php';
    include_once '../conn.php';
    ?>
    <div class="container">
        <div class="chart-container">
            <canvas id="myPieChart"></canvas>
        </div>
    </div>

    <?php
    // 获取游戏类别
    $categoryResult = $conn->query("SELECT name FROM categories");
    $categories = [];
    while ($categoryRow = $categoryResult->fetch_assoc()) {
        $categories[] = $categoryRow['name'];
    }

    // 获取每个类别的游戏数量
    $seriesResult = $conn->query("SELECT c.name AS category, COUNT(g.game_id) AS count FROM categories c LEFT JOIN games g ON c.category_id = g.category_id GROUP BY c.category_id");
    $seriesData = [];
    while ($seriesRow = $seriesResult->fetch_assoc()) {
        $seriesData[] = $seriesRow['count'];
    }
    ?>

    <script>
        // 在这里添加你的 JavaScript 代码
        // 获取 PHP 生成的数据
        var categories = <?php echo json_encode($categories); ?>;
        var seriesData = <?php echo json_encode($seriesData); ?>;

        // 使用 Chart.js 创建饼图
        var ctx = document.getElementById('myPieChart').getContext('2d');
        var myPieChart = new Chart(ctx, {
            type: 'pie',
            data: {
                labels: categories,
                datasets: [{
                    data: seriesData,
                    backgroundColor: [
                        'rgba(255, 99, 132, 0.7)',
                        'rgba(54, 162, 235, 0.7)',
                        'rgba(255, 206, 86, 0.7)',
                        'rgba(75, 192, 192, 0.7)',
                    ],
                    borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                    ],
                    borderWidth: 1
                }]
            },
            options: {
                plugins: {
                    title: {
                        display: true,
                        text: '游戏类别占比',
                        fontSize: 18, // 设置标题字体大小
                    }
                }
            }
        });
    </script>
</body>

</html>
